package com.example.app.pages.main.home.addNew.addRecord

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.EditNote
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.example.app.addRecordViewModel
import com.example.app.components.MyIcon.MyIcon
import com.example.app.components.MyListItem.MyListItem
import com.example.app.components.MyText.MyText
import com.example.app.components.MyTextField.MyTextField
import com.example.app.pages.main.home.addNew.addRecord.viewModel.AddRecordViewModel
import com.example.app.pages.main.home.me.viewModel.AddNewViewModel
import com.example.app.ui.theme.shapeMedium
import com.example.app.viewmodel.MainViewModel

@OptIn(
    ExperimentalMaterialApi::class,
    ExperimentalLayoutApi::class
)
@Composable
fun IncomeRemark(
    placeClick: () -> Unit
) {
    var incomeRemarkTextFieldValue =
        addRecordViewModel.incomeRemarkInputState.textFieldValue.collectAsState()

    MyListItem(modifier = Modifier,
        colors = ListItemDefaults.colors(containerColor = Color.Transparent),
        headlineContent = {
            Column(
            ) {
                //工具栏
                IncomeRemarkToolList(
                    placeClick = placeClick
                )
                //备注输入框
                Box(
                    modifier = Modifier
                        .clip(
                            RoundedCornerShape(
                                topStart = 0.dp,
                                topEnd = 0.dp,
                                bottomStart = shapeMedium,
                                bottomEnd = shapeMedium
                            )
                        )
                        .background(MaterialTheme.colorScheme.background)
                ) {
                    MyTextField(
                        colors = OutlinedTextFieldDefaults.colors(
                            errorContainerColor = MaterialTheme.colorScheme.background,
                            errorLabelColor = OutlinedTextFieldDefaults.colors().errorLabelColor,
                            focusedLabelColor = OutlinedTextFieldDefaults.colors().focusedPlaceholderColor,
                            focusedContainerColor = MaterialTheme.colorScheme.background,
                            unfocusedContainerColor = MaterialTheme.colorScheme.background,
                            unfocusedBorderColor = Color.Transparent,
                            focusedPlaceholderColor = OutlinedTextFieldDefaults.colors().focusedPlaceholderColor.copy(
                                .3f
                            ),
                            unfocusedLabelColor = OutlinedTextFieldDefaults.colors().focusedPlaceholderColor.copy(
                                .3f
                            ),
                            focusedBorderColor = Color.Transparent,
                            cursorColor = MaterialTheme.colorScheme.outline,
                        ),
                        myTextFieldState = addRecordViewModel.incomeRemarkInputState,
                        leadingIcon = {
                            MyIcon(imageVector = Icons.Rounded.EditNote)
                        },
                        placeholder = {
                            MyText(text = "请输入收入备注")
                        },
                        value = incomeRemarkTextFieldValue.value,
                        onValueChange = {
                            addRecordViewModel.incomeRemarkInputState.flowUpdate_textFieldValue(it)
                        },
                        label = {
                            MyText(text = "备注")
                        },
                        isError = false
                    )
                }
            }
        })
}